<template>
  <div class="">
    <el-container>
      <el-header style="margin-bottom: 6px">
        <UserHeader
          :username="user.username"
          :current-path="currentPath"
          @logout="logout"
          @update-password="openPasswordDialog"
        />
      </el-header>
      <el-container>
        <el-main style="padding: 6px 0 0 0; border-radius: 2rem">
          <a-tabs v-model:activeKey="menuIndex" type="card" :tab-bar-style="{ margin: 0 }">
            <a-tab-pane key="1" tab="标注区">
              <a-card style="background-color: #f8f1f1; padding: 0" :body-style="{ padding: 0 }">
                <ImagePreview
                  style="padding-top: 6px"
                  v-show="menuIndex === '1'"
                  :image-files="imageFiles"
                  :current-image-index="currentImageIndex"
                  :annotation-form="annotationForm"
                  @close-preview="closePreview"
                />
              </a-card>
            </a-tab-pane>
            <a-tab-pane key="3" tab="文件列表">
              <a-card style="background-color: #f8f1f1">
                <FileList
                  v-show="menuIndex === '3'"
                  :current-path="currentPath"
                  :current-files="currentFiles"
                  :loading="loading"
                  @open-file="handleOpen"
                  @delete-image="deleteImage"
                  ref="fileList"
                />
              </a-card>
            </a-tab-pane>
          </a-tabs>
          <ExcelPreview
            v-show="menuIndex === '2'"
            :excel-data="excelData"
            :current-excel-file="currentExcelFile"
            @close="closeExcelPreview"
          />
        </el-main>
      </el-container>
    </el-container>
    <PasswordDialog v-model="dialogVisible" @submit="submitForm" />
  </div>
</template>

<script>
import UserHeader from './UserHeader.vue'
import FileList from '../admin/FileList.vue'
import ImagePreview from './ImagePreview.vue'
import ExcelList from '../admin/ExcelList.vue'
import PasswordDialog from '../admin/PasswordDialog.vue'
import { useUserStore } from '@/store/user'
import { Files } from '@element-plus/icons-vue'
import { postAction } from '@/request/request'
import { adminUrl } from '@/api/api'
import { ElMessage } from 'element-plus'

export default {
  components: {
    Files,
    UserHeader,
    FileList,
    ImagePreview,
    ExcelPreview: ExcelList,
    PasswordDialog
  },
  data() {
    return {
      menuIndex: '1',
      currentPath: [],
      currentFiles: [],
      loading: false,
      isPreviewing: false,
      imageFiles: [],
      currentImageIndex: 0,
      annotationForm: {},
      isViewingExcel: false,
      excelData: { headers: [], rows: [] },
      currentExcelFile: null,
      dialogVisible: false,
      username: '123'
    }
  },
  computed: {
    user() {
      return useUserStore().user
    }
  },
  methods: {
    handleSelect(value) {
      this.menuIndex = value
      // 加载文件夹列表
      if (value === '3') {
        this.$refs.fileList.fetchFiles(this.user.username)
      }
    },
    async loadRootDirectory() {
      // 加载根目录文件列表
    },

    async handleOpen() {
      // 打开文件
    },
    async deleteImage() {
      // 删除图片
    },
    async submitForm() {
      // 提交密码修改
    },
    logout() {
      // 退出登录
      this.$router.push({
        path: '/login'
      })
      ElMessage({
        message: '退出登录成功',
        type: 'success',
        duration: 3000
      })
      useUserStore().updateUser({})
    },
    openPasswordDialog() {
      this.dialogVisible = true
    },
    closePreview() {
      this.isPreviewing = false
    },
    closeExcelPreview() {
      this.isViewingExcel = false
    }
  },
  mounted() {
    this.loadRootDirectory()
  }
}
</script>

<style scoped></style>
